<template>
  <view class="privacy-agreement flex align-items" v-if="showPrivacy">
    <view class="privacy-agreement-container">
      <view class="agreement-container-title text-center">
        用户隐私保护提示
      </view>
      <view class="agreement-container-content">
        使用前请仔细阅读
        <text
          class="agreement-container-text"
          @click.stop="openPrivacyProtection"
          >{{ privacyContractName }}</text
        >当您点击同意后，即表示您已理解并同意该条款内容，并可正常使用服务。如您拒绝，将无法使用该服务。
      </view>
      <view class="agreement-container-button flex content-between">
        <view
          class="container-button-item reject-button flex align-items"
          @click="handleRefuse"
          >拒绝</view
        >
        <button
          id="agree-btn"
          class="container-button-item flex align-items agree-button"
          open-type="agreePrivacyAuthorization"
          @agreeprivacyauthorization="handleAgree"
        >
          同意
        </button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      resolvePrivacyAuthorization: null,
      showPrivacy: false,
      privacyContractName: "", // 小程序协议名称
      hasRefused: false, // 是否拒绝过
    };
  },
  methods: {
    open() {
      this.showPrivacy = true;
    },
    close() {
      this.showPrivacy = false;
    },
    handleAgree() {
      // 需要用户同意隐私授权时
      // 弹出开发者自定义的隐私授权弹窗
      // 用户同意协议
      this.resolvePrivacyAuthorization({
        buttonId: "agree-btn",
        event: "agree",
      });
      this.close();
      this.$emit("confirm", this.hasRefused);
    },
    handleRefuse() {
      this.resolvePrivacyAuthorization({
        event: "disagree",
      });
      this.hasRefused = true;
      this.close();
      this.$emit("cancel");
    },
    openPrivacyProtection() {
      uni.openPrivacyContract({
        success: (res) => {
          console.log("openPrivacyContract success");
        },
        fail: (res) => {
          console.error("openPrivacyContract fail", res);
        },
      });
    },
    init() {
      // 查看是否需要阅读微信隐私协议
      try {
        uni.getPrivacySetting({
          success: (res) => {
            // 如果是false，则说明之前授权过无需弹出隐私协议
            if (res.needAuthorization === false) {
              return;
            }
            uni.onNeedPrivacyAuthorization((resolve) => {
              this.showPrivacy = true;
              this.privacyContractName = res.privacyContractName;
              this.resolvePrivacyAuthorization = resolve;
            });
          },
          fail: () => {},
          complete: () => {},
        });
      } catch (e) {
        //TODO handle the exception
      }
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss">
.text-center {
  text-align: center;
}

.flex {
  display: flex;
}

.align-items {
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.content-between {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.privacy-agreement {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999999;
  background-color: rgba(0, 0, 0, 0.5);

  .privacy-agreement-container {
    width: 520upx;
    min-height: 400upx;
    background-color: #fff;
    border-radius: 16px;
    padding: 48upx;
    font-size: 14px;

    .agreement-container-title {
      color: #262626;
      font-size: 36upx;
    }

    .agreement-container-content {
      color: #595959;
      margin-top: 20upx;
      margin-bottom: 32upx;
      line-height: 56upx;

      .agreement-container-text {
        color: #1876ff;
      }
    }

    .container-button-item {
      width: 240upx;
      height: 80upx;
      border-radius: 24px;
      background-color: #1876ff;
      color: #fff;

      &.reject-button {
        background-color: #f6f6f6;
        color: #4c4c4c;
      }

      &.agree-button {
        line-height: initial;
      }
    }
  }
}
</style>
